<template>
  <div>
    <div v-if="editable" class="crud-opts">
      <el-button
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="doSelectItem">选择物料</el-button>
      <el-button
        class="filter-item"
        size="mini"
        type="danger"
        icon="el-icon-delete"
        @click="doDeleteItem">删除</el-button>
      <base-item-select-list ref="baseItemSelectList" :multi-select="true" @itemSelectCallback="itemSelectCallback" />
    </div>
    <el-table
      :data="quoteDetails"
      size="mini"
      stripe
      border
      max-height="300px"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column v-if="editable" type="selection" width="50" />
      <el-table-column prop="itemCode" label="物料编号" width="90" />
      <el-table-column label="物料名称" prop="itemName" width="150" show-overflow-tooltip/>
      <el-table-column label="单位" width="80">
        <template slot-scope="scope">
          <el-select v-if="editable" v-model="scope.row.unit" style="width: 100%" size="mini" filterable clearable placeholder="单位">
            <el-option
              v-for="(item) in dicts.item_unit"
              :key="item.id"
              :label="item.dictName"
              :value="item.dictCode"/>
          </el-select>
          <template v-for="item in dicts.item_unit" v-else>
            <span v-if="scope.row.unit && scope.row.unit === item.dictCode" :key="item.id" >{{ item.dictName }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="不含税单价" width="150">
        <template slot-scope="scope">
          <el-input-number v-model.number="scope.row.unitPrice" :disabled="!editable" :controls="false" :precision="6" :min="0" size="mini" style="width: 100%" @change="unitPriceChange(scope.row)"/>
        </template>
      </el-table-column>
      <el-table-column label="含税单价" width="150">
        <template slot-scope="scope">
          <el-input-number v-model.number="scope.row.taxPrice" :disabled="!editable" :controls="false" :precision="6" :min="0" size="mini" style="width: 100%" @change="taxPriceChange(scope.row)"/>
        </template>
      </el-table-column>
      <el-table-column label="最小订购数" width="100">
        <template slot-scope="scope">
          <el-input-number v-model.number="scope.row.minQty" :disabled="!editable" :controls="false" :precision="2" :min="0" size="mini" style="width: 100%"/>
        </template>
      </el-table-column>
      <el-table-column label="最大订购数" width="100">
        <template slot-scope="scope">
          <el-input-number v-model.number="scope.row.maxQty" :disabled="!editable" :controls="false" :precision="2" :min="0" size="mini" style="width: 100%"/>
        </template>
      </el-table-column>
      <el-table-column label="交货周期(天)" width="100">
        <template slot-scope="scope">
          <el-input-number v-model.number="scope.row.deliveryDay" :disabled="!editable" :controls="false" :precision="0" :min="0" size="mini" style="width: 100%"/>
        </template>
      </el-table-column>
      <el-table-column label="规格" prop="itemSpec" show-overflow-tooltip />
      <el-table-column label="品牌" prop="itemBrand" show-overflow-tooltip />
      <el-table-column label="备注" width="100">
        <template slot-scope="scope">
          <el-input v-model="scope.row.rmk" :disabled="!editable" size="mini" style="width: 100%"/>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import BaseItemSelectList from '@/views/base/item/module/baseItemSelectList'
export default {
  components: { BaseItemSelectList },
  dictTypes: ['item_unit'],
  props: {
    quoteDetails: {
      type: Array,
      required: true
    },
    taxRate: {
      type: Number,
      default: 0,
      required: false
    },
    editable: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      loading: false,
      selectedDetailRows: [],
      style: 'width: 150px'
    }
  },
  methods: {
    getMaxDetailNum() {
      let detailNum = 0
      this.quoteDetails.forEach(tmprow => {
        if (tmprow.num > detailNum) {
          detailNum = tmprow.num
        }
      })
      return detailNum
    },
    handleSelectionChange(val) {
      this.selectedDetailRows = val
    },
    doSelectItem() {
      const _thisform = this.$refs.baseItemSelectList
      _thisform.initLoadData()
    },
    doDeleteItem() {
      let tmpDetails = JSON.parse(JSON.stringify(this.quoteDetails))
      this.selectedDetailRows.forEach(tmprow => {
        tmpDetails = tmpDetails.filter(vo => vo.num !== tmprow.num)
      })
      this.$emit('setDetails', tmpDetails)
    },
    doCopyItem() {
      const tmpDetails = JSON.parse(JSON.stringify(this.quoteDetails))
      let detailNum = this.getMaxDetailNum()
      this.selectedDetailRows.forEach(tmprow => {
        const addRow = JSON.parse(JSON.stringify(tmprow))
        detailNum++
        addRow.id = null
        addRow.detailLotNo = null
        addRow.num = detailNum
        tmpDetails.push(addRow)
      })
      this.$emit('setDetails', tmpDetails)
    },
    itemSelectCallback(selectedRows, sourceObject) {
      const allKeys = []
      const tmpDetails = JSON.parse(JSON.stringify(this.quoteDetails))
      tmpDetails.forEach(tmprow => {
        allKeys[tmprow.itemId] = true
      })
      let detailNum = this.getMaxDetailNum()
      selectedRows.forEach(tmprow => {
        if (!allKeys[tmprow.id]) {
          detailNum++
          const addRow = {}
          addRow.itemId = tmprow.id
          addRow.unit = tmprow.stockUnit
          addRow.itemCode = tmprow.itemCode
          addRow.itemName = tmprow.itemName
          addRow.itemSpec = tmprow.itemSpec
          addRow.itemBrand = tmprow.itemBrand
          addRow.taxPrice = tmprow.salePrice || tmprow.unitPrice
          addRow.minQty = 1
          addRow.maxQty = 1
          addRow.deliveryDay = 10
          addRow.id = null
          addRow.num = detailNum
          tmpDetails.push(addRow)
        }
      })
      this.$emit('setDetails', tmpDetails)
      sourceObject.cancel()
    },
    taxPriceChange(detailRow) {
      detailRow.unitPrice = detailRow.taxPrice / (1 + this.taxRate)
    },
    unitPriceChange(detailRow) {
      detailRow.taxPrice = (1 + this.taxRate) * detailRow.unitPrice
    }
  }
}
</script>
